/* display the html5 layout elements as block */
header, nav, section, article, footer {
	display: block;	
}

body 
{
    font: 1em/1.5em Georgia, 'Times New Roman', serif;
	background: #fff;
	color: #444;
	width: 99%;
	height: 99%;
	margin: 0px;
}

img {border: 0}
/* for smooth resizing */
body, img { 
    transition:all .2s linear;  
	-o-transition:all .2s linear;  
	-moz-transition:all .2s linear;  
	-webkit-transition:all .2s linear;
}

img#refresh-list
{
    float:left;
}

@media screen and (min-width: 960px )
{
	body{
		/*font-size:16px;*/
		font-size:1em;
	}
	img.play-icon {
	    width:24px;
	    padding-right:10px;
	}
	
	img#refresh-list 
	{
	    width:30px;
	    padding: 2px 5px;
	}
}

@media screen and (max-width: 960px )
{
	body{
		/*font-size:14px;*/
		font-size:0.8em;
	}
	img.play-icon {
	    width:18px;
	    padding-right:5px;
	}	
	
	img#refresh-list 
	{
	    width:20px;
	    padding: 2px 5px;
	}
}

@media screen and (max-width: 400px )
{
	body{
		font-size:0.5em; 
	}
	
	img.play-icon {
	    width:10px;
	    padding-right:2px;
	}
	
	img#refresh-list
	{
	    width:12px;
	    padding: 0px 2px;
	}
}

html{
	height: 100%;
}	

header{ 
	height:40px;
	max-width: 100%px;
	padding: 5px 20px;
	background-color: #fff;
}

h1 {
	font-weight: normal;
	color: #555;
	font-size: 1.5em; /* 12px * 1.5 = 18px */
	margin-bottom: 1px;
}

header h1 {
	font-weight: bolder;
	color: #555;
	font-size: 2em; /* 12px * 2 = 24px */
	margin: 0;
	padding-top: 10px;
}

h2 {
	font-weight: normal;
	color: #555;
	font-size: 1.2em;
	margin-bottom: 1px;	
}

h3 {
	font-weight: normal;
	color: #555;
	font-size: 1.1em;
	margin-bottom: 1px;	
}

#container {
	max-width: 100%;	
	padding: 0;
}

nav {
	width: 100%;
	max-width: 100%;
	height: 29px;
	float: left;
	border: 1px solid #000;
	background-color: #555;
	margin: 0;
	padding: 0;
}

nav ul {

	max-width: 100%;
	padding:5px 5px;
	margin:0;
	vertical-align: middle;
}

nav li {
	display: inline;
	list-style-type: none;
	margin:0;
	padding:0;
}

/* links for nav */
nav a:link, nav a:visited {
	font-size: 1.2em;
	color: #fff;
	text-decoration: none;
	padding: 5px 5px;
}

nav a:hover {
	color: #33dd77;
}

nav a:active {
	background: #fff;
}

/* regular links */
a:link, a:visited {
	font-size: 1.0em; /* same as body */
	color: blue;
	text-decoration: none;
	padding: 5px 5px;
}

a:hover {
	color: #33dd77;
}

a:active {
	background: #ddd;
}

/* table header links */
th a:link, th a:visited {
	font-size: 1.0em; /* same as body */
	color: #fff;
	text-decoration: none;
	padding: 5px 5px;
}

th a:hover, th a:active {
	color: #33dd77;
}

article {
	max-width: 99%;
	padding: 10px 10px;
	height: 100%
}

footer {
	max-width: 100%;
	padding: 5px;
	border-top: 1px solid #000;
	background: #fff;
}

#loading 
{
    margin: 30px 30px;
    padding: 40px 40px;
}

table {
	width: 100%;
	border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
	background: #FFFFCF;
}
th {
	background: #333;
	color: white;
	font-weight: bold;
}
td, th {
	padding: 6px;
	border: 1px solid #ccc;
	text-align: left;
}


td, th
{
    padding: 5px 5px;
}

th 
{
    text-align:left;
    background-color: #555;
    color: #fff;
}

#song-page
{
    display: block;
    padding-top: 30px;
    
}

.label 
{
    width: 20%;
    font-style: italic;
    font-weight: bolder;
}
